<template>
  <div class="existing wd1200">
    <v-title
      color="#FF8C1A"
      background-color="#FFF3E8"
      title="经营风险企业"
      class="title"
    />
    <el-row class="list-box" :gutter="20">
      <el-col
        v-for="(item, index) in list1"
        :key="'l' + index"
        :span="item.span"
      >
        <div class="classify" @click="toUrl(item)">
          <div>
            <img :src="require(`@/assets/images/busNeighbors/dev/${index}.png`)" alt="">
            <span>{{ item.title }}</span>
          </div>
          <div>
            <span v-loading="loading" class="color-o" style="text-align: end;display: inline-block;min-width: 80px">{{ counts[index] }}家</span>
            <img
              src="../../../../assets/images/busNeighbors/r.png"
              alt=""
              class="right-icon"
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <v-title color="#0071DF" background-color="#E5F2FF" title="司法风险企业" />
    <el-row class="list-box" :gutter="20">
      <el-col
        v-for="(item, index) in list2"
        :key="'s' + index"
        :span="item.span"
      >
        <div class="classify" @click="toUrl(item)">
          <div>
            <img :src="require(`@/assets/images/busNeighbors/dev/0${index}.png`)" alt="">
            <span>{{ item.title }}</span>
          </div>
          <div>
            <span v-loading="loading1" class="color-o" style="text-align: end;display: inline-block;min-width: 80px">{{ counts1[index] }}家</span>
            <img
              src="../../../../assets/images/busNeighbors/r.png"
              alt=""
              class="right-icon"
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import vTitle from '@/components/busNeighbors/title'
import { build_company_jyfx_type_count, build_company_jyfx_count, build_company_sffx_count, build_company_sffx_type_count, build_land_result_announcement_com_count, build_company_ydzb_count } from '@/api/busNeighbors'

export default {
  name: 'Existing',
  components: {
    vTitle
  },
  data() {
    return {
      list1: [
        {
          icon: require('@/assets/images/busNeighbors/1.png'),
          title: '经营风险企业',
          num: '2000家',
          span: 24,
          api: 'build_company_jyfx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_jyfx_chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id)
            }
          }, {
            api: 'build_company_jyfx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id)
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id)
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '经营异常企业',
          num: '2000家',
          span: 8,
          api: 'build_company_jyfx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_jyfx_chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '经营异常'
            }
          }, {
            api: 'build_company_jyfx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '经营异常'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '经营异常'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/1.png'),
          title: '行攻处罚企业',
          num: '2000家',
          span: 8,
          api: 'build_company_jyfx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_jyfx_chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '行政处罚'
            }
          }, {
            api: 'build_company_jyfx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '行政处罚'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '行政处罚'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '重大税收违法 ',
          num: '2000家',
          span: 8,
          api: 'build_company_jyfx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_jyfx_chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '重大税收违法'
            }
          }, {
            api: 'build_company_jyfx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '重大税收违法'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '重大税收违法'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '欠税公告企业',
          num: '2000家',
          span: 8,
          api: 'build_company_jyfx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_jyfx_chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '欠税公告'
            }
          }, {
            api: 'build_company_jyfx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '欠税公告'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '欠税公告'
          }
        }
      ],
      list2: [
        {
          icon: require('@/assets/images/busNeighbors/1.png'),
          title: '司法风险企业',
          num: '2000家',
          span: 24,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id)
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id)
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id)
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '立案信息企业',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '立案信息'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '立案信息'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '立案信息'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '裁判文书企业',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '裁判文书'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '裁判文书'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '裁判文书'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/1.png'),
          title: '限制高消费企业',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '限制高消费'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '限制高消费'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '限制高消费'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '法院公告企业',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '法院公告'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '法院公告'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '法院公告'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '失信被执行人',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '失信被执行人'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '失信被执行人'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '失信被执行人'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/1.png'),
          title: '被执行人企业',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '被执行人'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '被执行人'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '被执行人'
          }
        },
        {
          icon: require('@/assets/images/busNeighbors/2.png'),
          title: '开庭公告企业',
          num: '2000家',
          span: 8,
          api: 'build_company_sffx_list',
          url: '/bus-neighbors/list',
          searchApi: [{
            api: 'build_company_sffx__chart',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '开庭公告'
            }
          }, {
            api: 'build_company_sffx_year_count',
            params: {
              endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
              shpId: Number(this.$route.query.id),
              type: '开庭公告'
            }
          }],
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType: 5,
            lyId: Number(this.$route.query.id),
            pageNumber: 1,
            pageSize: 10,
            shpId: Number(this.$route.query.id),
            type: '开庭公告'
          }
        }
      ],
      counts: [],
      counts1: [],
      counts2: [],
      loading: true,
      loading1: true
    }
  },
  async mounted() {
    Promise.all([
      await build_company_jyfx_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id)
      }),
      await build_company_sffx_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id)
      })
    ]).then(res => {
      this.counts2 = res.map(item => item.data && (item.data.content.length && item.data.content[0].count) || 0)
    })
    Promise.all([
      await build_company_jyfx_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id)
      }),
      // await build_company_jyfx_type_count({
      //   endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
      //   shpId: Number(this.$route.query.id),
      //   type: "",
      // }),
      // await build_company_jyfx_count({
      //   endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
      //   shpId: Number(this.$route.query.id),
      //   startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD'),
      // }),
      await build_company_jyfx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '经营异常'
      }),
      await build_company_jyfx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '行政处罚'
      }),
      await build_company_jyfx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '重大税收违法'
      }),
      await build_company_jyfx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '欠税公告'
      })
    ]).then((res) => {
      console.log(res)
      this.loading = false
      this.counts = res.map(item => item.data && (item.data.content.length && item.data.content[0].count) || 0)
    })
    Promise.all([
      await build_company_sffx_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id)
      }),
      // await build_company_sffx_count({
      //   endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
      //   shpId: Number(this.$route.query.id),
      //   startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
      // }),
      // await build_company_sffx_type_count({
      //   endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
      //   shpId: Number(this.$route.query.id),
      //   type: "",
      // }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '立案信息'
      }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '裁判文书'
      }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '限制高消费'
      }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '法院公告'
      }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '失信被执行人'
      }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '被执行人'
      }),
      await build_company_sffx_type_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        type: '开庭公告'
      })
    ]).then(res => {
      this.loading1 = false
      this.counts1 = res.map(item => item.data && (item.data.content.length && item.data.content[0].count) || 0)
    })
  },
  methods: {
    toUrl(item) {
      this.$router.push({ path: item.url, query: { data: JSON.stringify(item), companyNames: this.$route.query.name }})
    }
  }
}
</script>
<style lang="scss" scoped>
.existing {
  .list-box {
    width: 100%;
    padding-left: 20px;
  }
  .title {
    margin: 0 20px 20px 20px;
    width: calc(100% - 40px);
  }
  .classify {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 10px 10px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #e8eaec;
    margin-bottom: 20px;
    .right-icon {
      width: 14px;
      height: 14px;
    }
    img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    div {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #000000;
    }
    .color-o {
      color: #ff8c1a;
    }
  }
  .con {
    width: 100%;
    border: 1px solid #e8eaec;
    margin-bottom: 20px;
    // height: 300px;
    .m-tit {
      padding-left: 26px;
      font-weight: 700;
      font-family: PingFang SC, PingFang SC;
    }
  }
}
</style>
